<template>
  <div class="report-management">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>报告管理</h2>
      <p>管理体检报告，包括报告生成、审核、发布和统计分析</p>
    </div>
    
    <!-- 搜索和筛选 -->
    <el-card class="search-card">
      <el-form :model="searchForm" inline class="search-form">
        <el-form-item label="患者姓名">
          <el-input
            v-model="searchForm.patientName"
            placeholder="请输入患者姓名"
            clearable
            style="width: 200px"
          />
        </el-form-item>
        
        <el-form-item label="报告状态">
          <el-select
            v-model="searchForm.status"
            placeholder="请选择状态"
            clearable
            style="width: 150px"
          >
            <el-option label="待生成" value="pending" />
            <el-option label="生成中" value="generating" />
            <el-option label="待审核" value="reviewing" />
            <el-option label="已发布" value="published" />
            <el-option label="已撤回" value="revoked" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="生成日期">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            style="width: 240px"
          />
        </el-form-item>
        
        <el-form-item label="审核医生">
          <el-select
            v-model="searchForm.reviewer"
            placeholder="请选择医生"
            clearable
            style="width: 150px"
          >
            <el-option
              v-for="doctor in doctors"
              :key="doctor.id"
              :label="doctor.name"
              :value="doctor.name"
            />
          </el-select>
        </el-form-item>
        
        <el-form-item label="报告类型">
          <el-select
            v-model="searchForm.type"
            placeholder="请选择类型"
            clearable
            style="width: 150px"
          >
            <el-option label="基础报告" value="basic" />
            <el-option label="详细报告" value="detailed" />
            <el-option label="专项报告" value="special" />
          </el-select>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>
            搜索
          </el-button>
          <el-button @click="handleReset">
            <el-icon><Refresh /></el-icon>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <!-- 操作栏 -->
    <el-card class="action-card">
      <div class="action-bar">
        <div class="action-left">
          <el-button type="primary" @click="handleBatchGenerate" :disabled="selectedReports.length === 0">
            <el-icon><Document /></el-icon>
            批量生成
          </el-button>
          <el-button type="success" @click="handleBatchApprove" :disabled="selectedReports.length === 0">
            <el-icon><Check /></el-icon>
            批量审核
          </el-button>
          <el-button type="warning" @click="handleBatchPublish" :disabled="selectedReports.length === 0">
            <el-icon><Upload /></el-icon>
            批量发布
          </el-button>
          <el-button type="info" @click="handleBatchDownload" :disabled="selectedReports.length === 0">
            <el-icon><Download /></el-icon>
            批量下载
          </el-button>
        </div>
        
        <div class="action-right">
          <el-button @click="handleStatistics">
            <el-icon><DataAnalysis /></el-icon>
            统计分析
          </el-button>
          <el-button @click="handleExport">
            <el-icon><Download /></el-icon>
            导出
          </el-button>
          <el-button @click="handleRefresh">
            <el-icon><Refresh /></el-icon>
            刷新
          </el-button>
        </div>
      </div>
    </el-card>
    
    <!-- 统计卡片 -->
    <div class="stats-cards">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon pending">
                <el-icon><Clock /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ stats.pending }}</div>
                <div class="stat-label">待生成</div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon reviewing">
                <el-icon><View /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ stats.reviewing }}</div>
                <div class="stat-label">待审核</div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon published">
                <el-icon><CircleCheck /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ stats.published }}</div>
                <div class="stat-label">已发布</div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon today">
                <el-icon><Calendar /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ stats.today }}</div>
                <div class="stat-label">今日生成</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    
    <!-- 报告列表 -->
    <el-card class="table-card">
      <el-table
        v-loading="loading"
        :data="reports"
        @selection-change="handleSelectionChange"
        @sort-change="handleSortChange"
        stripe
        style="width: 100%"
      >
        <el-table-column type="selection" width="55" />
        
        <el-table-column prop="id" label="报告ID" width="120" sortable="custom" />
        
        <el-table-column prop="patientName" label="患者信息" width="150">
          <template #default="{ row }">
            <div class="patient-info">
              <el-avatar :size="32" :src="row.patientAvatar">
                <el-icon><User /></el-icon>
              </el-avatar>
              <div class="patient-details">
                <div class="patient-name">{{ row.patientName }}</div>
                <div class="patient-phone">{{ row.patientPhone }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column prop="checkupDate" label="体检日期" width="120" sortable="custom">
          <template #default="{ row }">
            {{ formatDate(row.checkupDate) }}
          </template>
        </el-table-column>
        
        <el-table-column prop="type" label="报告类型" width="100">
          <template #default="{ row }">
            <el-tag :type="getTypeColor(row.type)" size="small">
              {{ getTypeText(row.type) }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)" size="small">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column prop="generatedAt" label="生成时间" width="150" sortable="custom">
          <template #default="{ row }">
            {{ row.generatedAt ? formatDateTime(row.generatedAt) : '-' }}
          </template>
        </el-table-column>
        
        <el-table-column prop="reviewer" label="审核医生" width="100" show-overflow-tooltip />
        
        <el-table-column prop="reviewedAt" label="审核时间" width="150">
          <template #default="{ row }">
            {{ row.reviewedAt ? formatDateTime(row.reviewedAt) : '-' }}
          </template>
        </el-table-column>
        
        <el-table-column prop="publishedAt" label="发布时间" width="150">
          <template #default="{ row }">
            {{ row.publishedAt ? formatDateTime(row.publishedAt) : '-' }}
          </template>
        </el-table-column>
        
        <el-table-column label="操作" width="220" fixed="right">
          <template #default="{ row }">
            <div class="action-buttons">
              <el-button type="primary" size="small" text @click="handleView(row)">
                查看
              </el-button>
              
              <el-button
                v-if="row.status === 'pending'"
                type="success"
                size="small"
                text
                @click="handleGenerate(row)"
              >
                生成
              </el-button>
              
              <el-button
                v-if="row.status === 'reviewing'"
                type="warning"
                size="small"
                text
                @click="handleReview(row)"
              >
                审核
              </el-button>
              
              <el-button
                v-if="row.status === 'reviewing'"
                type="primary"
                size="small"
                text
                @click="handlePublish(row)"
              >
                发布
              </el-button>
              
              <el-button
                v-if="row.status === 'published'"
                type="info"
                size="small"
                text
                @click="handleDownload(row)"
              >
                下载
              </el-button>
              
              <el-dropdown trigger="click">
                <el-button type="info" size="small" text>
                  更多<el-icon><ArrowDown /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="handleEdit(row)">
                      <el-icon><Edit /></el-icon>
                      编辑
                    </el-dropdown-item>
                    <el-dropdown-item @click="handlePreview(row)">
                      <el-icon><View /></el-icon>
                      预览
                    </el-dropdown-item>
                    <el-dropdown-item @click="handlePrint(row)">
                      <el-icon><Printer /></el-icon>
                      打印
                    </el-dropdown-item>
                    <el-dropdown-item @click="handleSend(row)">
                      <el-icon><Message /></el-icon>
                      发送
                    </el-dropdown-item>
                    <el-dropdown-item
                      v-if="row.status === 'published'"
                      divided
                      @click="handleRevoke(row)"
                    >
                      <el-icon><Close /></el-icon>
                      撤回
                    </el-dropdown-item>
                    <el-dropdown-item
                      v-if="row.status === 'pending'"
                      divided
                      @click="handleDelete(row)"
                    >
                      <el-icon><Delete /></el-icon>
                      删除
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :total="pagination.total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    
    <!-- 报告详情对话框 -->
    <ReportDetail
      v-model:visible="detailVisible"
      :report="currentReport"
      @generate="handleGenerate"
      @review="handleReview"
      @publish="handlePublish"
    />
    
    <!-- 报告编辑对话框 -->
    <ReportEditor
      v-model:visible="editorVisible"
      :report="currentReport"
      @success="handleEditSuccess"
    />
    
    <!-- 报告预览对话框 -->
    <ReportPreview
      v-model:visible="previewVisible"
      :report="currentReport"
    />
    
    <!-- 统计分析对话框 -->
    <ReportStatistics
      v-model:visible="statisticsVisible"
      :reports="reports"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import ReportDetail from '@/components/ReportDetail.vue'
import ReportEditor from '@/components/ReportEditor.vue'
import ReportPreview from '@/components/ReportPreview.vue'
import ReportStatistics from '@/components/ReportStatistics.vue'

// 响应式数据
const loading = ref(false)
const detailVisible = ref(false)
const editorVisible = ref(false)
const previewVisible = ref(false)
const statisticsVisible = ref(false)
const currentReport = ref(null)
const selectedReports = ref([])

// 搜索表单
const searchForm = reactive({
  patientName: '',
  status: '',
  dateRange: [],
  reviewer: '',
  type: ''
})

// 分页
const pagination = reactive({
  currentPage: 1,
  pageSize: 20,
  total: 0
})

// 排序
const sortConfig = reactive({
  prop: 'generatedAt',
  order: 'descending'
})

// 模拟数据
const reports = ref([
  {
    id: 'R001',
    checkupId: 'C001',
    patientId: 1,
    patientName: '张三',
    patientPhone: '13800138001',
    patientAvatar: '',
    checkupDate: '2024-01-20',
    type: 'basic',
    status: 'published',
    generatedAt: '2024-01-21 10:30:00',
    reviewer: '李医生',
    reviewedAt: '2024-01-21 14:20:00',
    publishedAt: '2024-01-21 15:00:00',
    createdAt: '2024-01-21 10:30:00'
  },
  {
    id: 'R002',
    checkupId: 'C002',
    patientId: 2,
    patientName: '李四',
    patientPhone: '13800138002',
    patientAvatar: '',
    checkupDate: '2024-01-21',
    type: 'detailed',
    status: 'reviewing',
    generatedAt: '2024-01-22 09:15:00',
    reviewer: '王医生',
    reviewedAt: '',
    publishedAt: '',
    createdAt: '2024-01-22 09:15:00'
  },
  {
    id: 'R003',
    checkupId: 'C003',
    patientId: 3,
    patientName: '王五',
    patientPhone: '13800138003',
    patientAvatar: '',
    checkupDate: '2024-01-19',
    type: 'basic',
    status: 'published',
    generatedAt: '2024-01-20 11:45:00',
    reviewer: '张医生',
    reviewedAt: '2024-01-20 16:30:00',
    publishedAt: '2024-01-20 17:00:00',
    createdAt: '2024-01-20 11:45:00'
  },
  {
    id: 'R004',
    checkupId: 'C004',
    patientId: 4,
    patientName: '赵六',
    patientPhone: '13800138004',
    patientAvatar: '',
    checkupDate: '2024-01-18',
    type: 'special',
    status: 'generating',
    generatedAt: '',
    reviewer: '',
    reviewedAt: '',
    publishedAt: '',
    createdAt: '2024-01-19 08:30:00'
  },
  {
    id: 'R005',
    checkupId: 'C005',
    patientId: 5,
    patientName: '孙七',
    patientPhone: '13800138005',
    patientAvatar: '',
    checkupDate: '2024-01-22',
    type: 'detailed',
    status: 'pending',
    generatedAt: '',
    reviewer: '',
    reviewedAt: '',
    publishedAt: '',
    createdAt: '2024-01-22 16:20:00'
  }
])

const doctors = ref([
  { id: 1, name: '张医生', title: '主任医师' },
  { id: 2, name: '李医生', title: '副主任医师' },
  { id: 3, name: '王医生', title: '主治医师' },
  { id: 4, name: '陈医生', title: '住院医师' },
  { id: 5, name: '刘医生', title: '主治医师' }
])

// 统计数据
const stats = computed(() => {
  const pending = reports.value.filter(item => item.status === 'pending').length
  const reviewing = reports.value.filter(item => item.status === 'reviewing').length
  const published = reports.value.filter(item => item.status === 'published').length
  const today = reports.value.filter(item => {
    const today = new Date().toISOString().split('T')[0]
    return item.generatedAt && item.generatedAt.startsWith(today)
  }).length
  
  return {
    pending,
    reviewing,
    published,
    today
  }
})

// 生命周期
onMounted(() => {
  loadReports()
})

// 方法
const loadReports = async () => {
  loading.value = true
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 500))
    pagination.total = reports.value.length
  } catch (error) {
    ElMessage.error('加载报告列表失败')
  } finally {
    loading.value = false
  }
}

const handleSearch = () => {
  pagination.currentPage = 1
  loadReports()
}

const handleReset = () => {
  Object.assign(searchForm, {
    patientName: '',
    status: '',
    dateRange: [],
    reviewer: '',
    type: ''
  })
  handleSearch()
}

const handleRefresh = () => {
  loadReports()
}

const handleView = (report) => {
  currentReport.value = report
  detailVisible.value = true
}

const handleGenerate = async (report) => {
  try {
    await ElMessageBox.confirm(
      `确定要生成报告 ${report.id} 吗？`,
      '生成报告',
      {
        confirmButtonText: '生成',
        cancelButtonText: '取消',
        type: 'info'
      }
    )
    
    // 模拟API调用
    report.status = 'generating'
    
    // 模拟生成过程
    setTimeout(() => {
      report.status = 'reviewing'
      report.generatedAt = new Date().toLocaleString('zh-CN')
      ElMessage.success('报告生成完成，等待审核')
    }, 2000)
    
    ElMessage.info('正在生成报告...')
  } catch {
    // 用户取消
  }
}

const handleReview = (report) => {
  currentReport.value = report
  // 这里可以打开审核对话框
  ElMessage.info(`审核报告功能待实现 - 报告ID: ${report.id}`)
}

const handlePublish = async (report) => {
  try {
    await ElMessageBox.confirm(
      `确定要发布报告 ${report.id} 吗？发布后患者将能够查看报告。`,
      '发布报告',
      {
        confirmButtonText: '发布',
        cancelButtonText: '取消',
        type: 'success'
      }
    )
    
    // 模拟API调用
    report.status = 'published'
    report.publishedAt = new Date().toLocaleString('zh-CN')
    
    ElMessage.success('报告已发布')
  } catch {
    // 用户取消
  }
}

const handleDownload = (report) => {
  ElMessage.info(`下载报告功能待实现 - 报告ID: ${report.id}`)
}

const handleEdit = (report) => {
  currentReport.value = report
  editorVisible.value = true
}

const handlePreview = (report) => {
  currentReport.value = report
  previewVisible.value = true
}

const handlePrint = (report) => {
  ElMessage.info(`打印报告功能待实现 - 报告ID: ${report.id}`)
}

const handleSend = (report) => {
  ElMessage.info(`发送报告功能待实现 - 报告ID: ${report.id}`)
}

const handleRevoke = async (report) => {
  try {
    const { value: reason } = await ElMessageBox.prompt(
      '请输入撤回原因',
      '撤回报告',
      {
        confirmButtonText: '确认撤回',
        cancelButtonText: '取消',
        inputPlaceholder: '请输入撤回原因',
        inputValidator: (value) => {
          if (!value || value.trim() === '') {
            return '请输入撤回原因'
          }
          return true
        }
      }
    )
    
    // 模拟API调用
    report.status = 'revoked'
    
    ElMessage.success('报告已撤回')
  } catch {
    // 用户取消
  }
}

const handleDelete = async (report) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除报告 ${report.id} 吗？此操作不可恢复。`,
      '删除报告',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'error'
      }
    )
    
    // 模拟API调用
    const index = reports.value.findIndex(item => item.id === report.id)
    if (index > -1) {
      reports.value.splice(index, 1)
    }
    
    ElMessage.success('报告已删除')
  } catch {
    // 用户取消
  }
}

const handleBatchGenerate = async () => {
  try {
    await ElMessageBox.confirm(
      `确定要批量生成选中的 ${selectedReports.value.length} 个报告吗？`,
      '批量生成',
      {
        confirmButtonText: '生成',
        cancelButtonText: '取消',
        type: 'info'
      }
    )
    
    // 模拟API调用
    selectedReports.value.forEach(report => {
      if (report.status === 'pending') {
        report.status = 'generating'
        setTimeout(() => {
          report.status = 'reviewing'
          report.generatedAt = new Date().toLocaleString('zh-CN')
        }, 2000)
      }
    })
    
    ElMessage.success('批量生成已开始')
    selectedReports.value = []
  } catch {
    // 用户取消
  }
}

const handleBatchApprove = async () => {
  try {
    await ElMessageBox.confirm(
      `确定要批量审核通过选中的 ${selectedReports.value.length} 个报告吗？`,
      '批量审核',
      {
        confirmButtonText: '审核通过',
        cancelButtonText: '取消',
        type: 'success'
      }
    )
    
    // 模拟API调用
    selectedReports.value.forEach(report => {
      if (report.status === 'reviewing') {
        report.reviewedAt = new Date().toLocaleString('zh-CN')
        report.reviewer = '系统管理员'
      }
    })
    
    ElMessage.success('批量审核完成')
    selectedReports.value = []
  } catch {
    // 用户取消
  }
}

const handleBatchPublish = async () => {
  try {
    await ElMessageBox.confirm(
      `确定要批量发布选中的 ${selectedReports.value.length} 个报告吗？`,
      '批量发布',
      {
        confirmButtonText: '发布',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    // 模拟API调用
    selectedReports.value.forEach(report => {
      if (report.status === 'reviewing') {
        report.status = 'published'
        report.publishedAt = new Date().toLocaleString('zh-CN')
      }
    })
    
    ElMessage.success('批量发布完成')
    selectedReports.value = []
  } catch {
    // 用户取消
  }
}

const handleBatchDownload = () => {
  ElMessage.info('批量下载功能待实现')
}

const handleStatistics = () => {
  statisticsVisible.value = true
}

const handleExport = () => {
  ElMessage.info('导出功能待实现')
}

const handleSelectionChange = (selection) => {
  selectedReports.value = selection
}

const handleSortChange = ({ prop, order }) => {
  sortConfig.prop = prop
  sortConfig.order = order
  loadReports()
}

const handleSizeChange = (size) => {
  pagination.pageSize = size
  pagination.currentPage = 1
  loadReports()
}

const handleCurrentChange = (page) => {
  pagination.currentPage = page
  loadReports()
}

const handleEditSuccess = () => {
  editorVisible.value = false
  loadReports()
}

const getStatusType = (status) => {
  const statusMap = {
    pending: 'info',
    generating: 'warning',
    reviewing: 'primary',
    published: 'success',
    revoked: 'danger'
  }
  return statusMap[status] || 'info'
}

const getStatusText = (status) => {
  const statusMap = {
    pending: '待生成',
    generating: '生成中',
    reviewing: '待审核',
    published: '已发布',
    revoked: '已撤回'
  }
  return statusMap[status] || '未知'
}

const getTypeColor = (type) => {
  const typeMap = {
    basic: '',
    detailed: 'success',
    special: 'warning'
  }
  return typeMap[type] || ''
}

const getTypeText = (type) => {
  const typeMap = {
    basic: '基础报告',
    detailed: '详细报告',
    special: '专项报告'
  }
  return typeMap[type] || '未知'
}

const formatDate = (date) => {
  if (!date) return ''
  return new Date(date).toLocaleDateString('zh-CN')
}

const formatDateTime = (dateTime) => {
  if (!dateTime) return ''
  const date = new Date(dateTime)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}
</script>

<style scoped>
.report-management {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 24px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #606266;
  font-size: 14px;
}

.search-card,
.action-card,
.table-card {
  margin-bottom: 20px;
}

.search-form {
  margin: 0;
}

.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.action-left,
.action-right {
  display: flex;
  gap: 12px;
}

.stats-cards {
  margin-bottom: 20px;
}

.stat-card {
  cursor: pointer;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.stat-icon.pending {
  background: linear-gradient(135deg, #909399, #606266);
}

.stat-icon.reviewing {
  background: linear-gradient(135deg, #409eff, #337ecc);
}

.stat-icon.published {
  background: linear-gradient(135deg, #67c23a, #529b2e);
}

.stat-icon.today {
  background: linear-gradient(135deg, #e6a23c, #b88230);
}

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}

.patient-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.patient-details {
  flex: 1;
  min-width: 0;
}

.patient-name {
  font-weight: 500;
  color: #2c3e50;
  font-size: 14px;
  line-height: 1.2;
}

.patient-phone {
  color: #909399;
  font-size: 12px;
  line-height: 1.2;
}

.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .search-form {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .search-form .el-form-item {
    margin-right: 0;
    margin-bottom: 12px;
  }
  
  .action-bar {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .action-left,
  .action-right {
    justify-content: center;
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .report-management {
    padding: 10px;
  }
  
  .stats-cards .el-col {
    margin-bottom: 12px;
  }
  
  .stat-content {
    gap: 12px;
  }
  
  .stat-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  
  .stat-number {
    font-size: 20px;
  }
  
  .patient-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 4px;
  }
  
  .action-buttons .el-button {
    width: 100%;
    justify-content: center;
  }
  
  :deep(.el-table) {
    font-size: 12px;
  }
  
  :deep(.el-table .cell) {
    padding: 8px 4px;
  }
}

@media (max-width: 480px) {
  .page-header h2 {
    font-size: 20px;
  }
  
  .action-left,
  .action-right {
    flex-direction: column;
  }
  
  .action-left .el-button,
  .action-right .el-button {
    width: 100%;
  }
  
  .stat-content {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
  
  .pagination-wrapper {
    overflow-x: auto;
  }
  
  :deep(.el-pagination) {
    justify-content: center;
    flex-wrap: wrap;
  }
}
</style>